<div class="container">
  <div class="col-md-8 col-md-offset-2">
    <div v-if="type === 'read'">
      <div class="panel panel-default">
        <div class="panel-heading">
        已读消息
        </div>
        <%- partial('components/readList') %>
      </div>
    </div>
    <div v-else>
      <div class="panel panel-default">
        <div class="panel-heading">
        新消息
        </div>
        <%- partial('components/unReadList') %>
      </div>
    </div>
  </div>
</div>
<script>
  var appId = $('[name=app-id]').val();
  var pagePrefix = '<%= apiPrefix.page %>';
  var dataPrefix = '<%= apiPrefix.data %>';

  var vue = new Vue({
    el: '#app',
    data: {
      errorMsg: '',
      successMsg: '',
      type: 'read',
      read: {
        messages: [],
        currentPage: 1,
        pages: 1
      },
      unRead: {
        messages: [],
        currentPage: 1,
        pages: 1
      },
      canLoadData: true
    },
    methods: {
      getData: function(type, nextPage) {
        $.post(dataPrefix + '/message/data', {appId: appId, type: type, currentPage: nextPage}, function(result) {
          vue.canLoadData = true
          if (result.err) return vue.errorMsg = result.err;
          vue.currentPage = result.currentPage
          vue.pages = result.pages
          result.data.forEach( function(item){
            if (vue.type === 'read') vue.read.messages.push(item)
            else vue.unRead.messages.push(item)
          })
        })
      },
    }
  })

  vue.type = '<%= typeof(type) !== "undefined" && type ? type : "read" %>'

  var scrollButtom = new ScrollButtom();
  scrollButtom.init(function() {
    if (vue.currentPage < vue.pages && vue.canLoadData) {
      vue.canLoadData = false;
      vue.getData(vue.currentPage + 1);
    }
  });

  vue.getData(vue.type, vue.currentPage);
</script>
